<template>
<div id="edit-user">
    <div v-if="!uid">
        <h3>参数不存在</h3>
        <router-link :to="{name: 'userList'}">点击跳转，选择需修改的用户信息</router-link>
    </div>
    <div v-else class="edit-user-layout">
        <header class="edit-user-header">
            <h3 class="edit-user-title">编辑用户 ： {{uid}}</h3>
        </header>
        <form class="edit-user-from" ref="editForm">
            <my-input
                :title="'用户名'"
                :name="'username'"
                v-model="username"
                :readonly="true"
            ></my-input>
            <my-input
                :type="'email'"
                :title="'邮箱'"
                :name="'email'"
                :isvalidatarule="email.isvalidatarule"
                :rulebool="email.rulebool"
                v-model="email.value"
            ></my-input>
            <my-input
                :type="'tele'"
                :title="'手机号码'"
                :name="'tele'"
                :minlength="11"
                :maxlength="11"
                :isvalidatarule="tele.isvalidatarule"
                :rulebool="tele.rulebool"
                v-model="tele.value"
            ></my-input>
        </form>
        <footer class="edit-user-footer">
            <my-button
                :type="'reset'"
                link
                :to="{name: 'userList'}"
            >取消</my-button>
            <my-button
                :type="'save'"
                :disabled="!(this.email.rulebool && this.tele.rulebool)" 
                @click.native="handleClickSaveUser"
            >保存</my-button>
        </footer>
    </div>
</div>
</template>

<script>
import { editUser, saveUser } from '../../config/data'
import { messageTip } from '../JS'
export default {
    name: "editUser",
    props: ["uid"],
    data() {
        return {
            username: "",
            email: {
                value: "",
                isvalidatarule: false,
                rulebool: false
            },
            tele: {
                value: "",
                isvalidatarule: false,
                rulebool: false
            },
            ruleTime: 300,
            pret: 0,
        }
    },
    created() {
        this.getUserInfo()
    },
    methods: {
        async handleClickSaveUser() {
            let userInfo = this.getUserFormData()
            let result = await saveUser({
                ...userInfo,
                uid: this.uid,
                utime: Date.now()
            })
            if(!result.fsBool) return;
            messageTip({content: "修改成功"})
            this.$router.push({name: "userList"})
        },
        async getUserInfo() {
            let result = await editUser({uid: this.uid})
            let { username, email, tele } = result.data.user
            this.username = username
            this.email.value = email
            this.tele.value = tele
            // 开启规则验证
            this.email.isvalidatarule = true
            this.tele.isvalidatarule = true
        },
        getUserFormData() {
            let userForm = this.$refs.editForm
            let formData = new FormData(userForm)
            let userInfo = {
                email: formData.get("email"),
                tele: formData.get("tele"),
            }
            return userInfo;
        }
    },
    watch: {
        "email.value"() {
            if(!this.email.value) return;
            if(this.email.value.length === 0) {
                this.email.isvalidatarule = false
                return;
            }
            let nowt = Number(Date.now())
            if(nowt - this.pret > this.ruleTime) {
                this.pret = nowt
                setTimeout(_ => {
                    this.email.isvalidatarule = true
                    if(/^\w{2,}@(\w+\.\w+)+$/.test(this.email.value)) {
                        this.email.rulebool = true
                    } else {
                        this.email.rulebool = false
                    }
                }, this.ruleTime)
            }
        },
        "tele.value"() {
            if(!this.tele.value) return;
            if(this.tele.value.length === 0) {
                this.tele.isvalidatarule = false
                return;
            }
            this.pret = 0
            let nowt = Number(Date.now())
            if(nowt - this.pret > this.ruleTime) {
                this.pret = nowt
                setTimeout(_ => {
                    this.tele.isvalidatarule = true
                    if(/^1[358][0-9]{9}$/.test(this.tele.value)) {
                        this.tele.rulebool = true
                    } else {
                        this.tele.rulebool = false
                    }
                }, this.ruleTime)
            }
        }
    }
}
</script>

<style scoped>
.edit-user-layout {
    display: flex;
    flex-direction: column;
}
.edit-user-header {
    height: 64px;
    line-height: 64px;
    font-size: 20px;
}
.edit-user-from {
    margin: 0 auto;
    padding: 24px;
}
.edit-user-footer {
    display: flex;
    justify-content: center;
}
.edit-user-footer :first-of-type {
    margin-right: 12px;
}
</style>